<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue生命周期函数钩子的使用</title>
	<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="box">
			<input type="text" v-model="msg" /><br />
			<span id="result">{{msg}}</span>
		</div>
	</body>
	<script>
		/* 构建Vue 生成Vue对象 vm（调度器），Vue( ) 参数为json格式的数据( {属性：值} ) */
		/* ViewModel  */
		var vm=new Vue({
			/* el 参数用来绑定选择器(id选择器),通过选择器找到对应的元素(标签||控件) */
			/* 也就是 View */
			el:"#box",
			/* 声明 data 的参数用来绑定的控件传值  也就是描述数据*/
			/* 也就是 Model */
			data:{
				msg:"hi"
			},
			beforeCreate() {
				console.log("beforeCreate被执行");
				console.log("model(data)中参数的值:"+this.msg)
			},
			created() {
				console.log("created被执行");
				console.log("model(data)中参数的值:"+this.msg)
			},
			beforeMount() {
				console.log("beforeMount被执行");
				/* 通过js获取id为result党的值 */
				var result = document.getElementById("result").innerHTML;
				console.log("span标签内文本信息:"+result)
			},
			mounted() {
				console.log("mounted被执行");
				var result = document.getElementById("result").innerHTML;
				console.log("span标签中的文本信息:"+result)
			},
			beforeUpdate() {
				console.log("beforeUpdate被执行");
				/* 找到页面中id为result的标签 并获取文本值 */
				var result = document.getElementById("result").innerHTML;
				console.log("span标签的文本信息:"+result);
			},
			updated() {
				console.log("updated被执行");
				var result = document.getElementById("result").innerHTML;
				console.log("span标签的文本信息:"+result);
			},
			beforeDestroy() {
				console.log("beforeDestroy被执行");
			},
			destroyed() {
				console.log("beforeDestroy");
			}
		});
	</script>
</html>
